<!-- 表格多选 -->

<template>
  <div class="flex1">
    <OurTitle v-bind="$props" />

    <div class="QuestionnaireList-table">
      <draggable v-model="obj.optionList" :animation="200" class="flex" draggable=".flex1">
        <div class="flex2" />
        <div v-for="option in obj.optionList" :key="option.key" class="flex1">
          <OurTableOption :obj="option" />
        </div>
        <div class="flex0">
          <BtnText v-if="hasAdd" :title="`${CORE.MAP.TIP_ADD}选项`" @click="toAdd" />
        </div>
      </draggable>

      <draggable v-model="obj.questionList" :animation="200">
        <div v-for="question in obj.questionList" :key="question.key" class="flex">
          <div class="flex2"><OurTableTitle :obj="question" /></div>
          <div v-for="option in obj.optionList" :key="option.key" class="flex1">
            <el-checkbox :value="false" disabled>{{ option.label }}</el-checkbox>
          </div>
          <div class="flex0">
            <BtnText v-if="hasDelQuestion" :title="`${CORE.MAP.TIP_DEL}问题`" red @click="toDelQuestion" />
          </div>
        </div>
      </draggable>

      <div v-if="!isShow" class="flex">
        <div class="flex2"><BtnText :title="`${CORE.MAP.TIP_ADD}问题`" @click="toAddQuestion" /></div>
        <div v-for="option in obj.optionList" :key="option.key" class="flex1">
          <BtnText v-if="obj.optionList.length !== 1" :title="`${CORE.MAP.TIP_DEL}选项`" red @click="toDel" />
        </div>
        <div class="flex0" />
      </div>
    </div>

    <div class="QuestionnaireList-flex">
      <div class="QuestionnaireList-remark">底部备注</div>
      <OurRemark v-bind="$props" />

      <div>项数</div>
      <FormSliderRange
        :key="obj.optionList.length"
        :one="obj"
        bind="min, max"
        :min="1"
        :max="obj.optionList.length || 1"
        :marks="marks"
        :width="220"
      />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MyRadioTable from '../MyRadioTable'

// ============================== 导出组件 ============================== //

export default CORE.extend(MyRadioTable, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyCheckboxTable',
})
</script>
